<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>地图</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
      .hw100{
        width: 100%;
        height: 100%;
      }

      .ribbon-3 {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.ribbon-3::before,
.ribbon-3::after {
  content: "";
  position: absolute;
}
.ribbon-3::before {
  left: 8px;
  width: 40px;
  height: 8px;
  border-radius: 8px 8px 0px 0px;
  background-color: var(--ribbon-primary-color);
  opacity: 0.6;
}
.ribbon-3::after {
  border-radius: 0px 8px 8px 0px;
  width: 8px;
  height: 40px;
  right: 0px;
  bottom: 8px;
  background-color: #57DD43;
  opacity: 0.6;
}
.ribbon-3 > span {
  position: absolute;
  top: 20%;
  right: -40%;
  z-index: 2;
  width: 150%;
  height: 40px;
  overflow: hidden;
  transform: rotate(45deg);
  border: 1px dashed;
  box-shadow: 0 0 0 3px #43afdd, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
  background: #43afdd;
  /* 文本居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

    </style>
  </head>
  <body>
    <div class="ribbon-3">
      <span>Map Craft Js</span>
    </div>

    <div class="hw100 app">
      <div id="container"></div>
      <div class="layers">
        卫星图
      </div>
      <div class="layers-2">
        标准图
      </div>
      <div class="layers-3">
        暗夜图
      </div>
    </div>
  </body>
</html>
<script type="module" src="./map.js"></script>
